<template>
	<Header id="header">
		<div class="left">
			<van-icon name="wap-nav" @click="clickFun"/>
			<span class="title"id="title">{{title}}</span>
		</div>
		<div class="right">
			<span class="position">
				深圳
				<van-icon name="arrow" />
			</span>
			<van-icon name="contact" />
		</div>
	</Header>
	
</template>

<script>
	import { Icon } from 'vant'
	import { mapGetters } from 'vuex'
	export default{
		components:{
			[Icon.name]:Icon
		},
		computed: {
			// 获取仓库里的title
			...mapGetters(['title','flag'])
		},
		methods:{
			clickFun(){
		  		if(this.flag){
		  			this.$store.commit('isFlag',false);
		  			
		  		}else{
		  			this.$store.commit('isFlag',true);
		  			
		  		}
		  	}
		}
	}
</script>

<style lang="less"scoped="scoped">
	#header{
		height: 50px;
		background: #282828;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left{
		display: flex;
		align-items: center;
		.van-icon{
   			 margin-left: 20px;
   			 color: lightgray;
		}
		.title{
			 margin-left: 30px;
			 color: #efefef;
		}
	}
	.right{
		display: flex;
		align-items: center;
		.position{
			margin-right: 10px;
			 color: lightgray;
			.van-icon{
				transform: rotate(90deg);
			}
		}
		.van-icon{
			 margin-right: 20px;
			  color: lightgray;
		}
	}
</style>